<script>
import image from '@/assets/images/jqr.png'
// 智能客服
import DialogEntity from '@/components/consult/dialog.vue'
// 消息中心
import NoticeDialog from '@/portal4.1/pc/component/common/Dialog/NoticeDialog.vue'
// 收藏中心
import CollectDialog from '@/portal4.1/pc/component/common/Dialog/CollectDialog.vue'
// 系统设置中心
import SettingDialog from '@/portal4.1/pc/component/common/Dialog/SettingDialog.vue'
// 主题切换
// import ThemeTemp from '@/portal4.1/components/solt/theme.vue'

import { layout } from '@/mixins/layout'
export default {
  name: 'DefaultAffix',
  components: {
    NoticeDialog,
    DialogEntity,
    CollectDialog,
    SettingDialog
    // ThemeTemp
  },
  mixins: [layout],
  data() {
    return {
      image: image
    }
  },
  computed: {
    fontColor() {
      return { '--font-color': this.layoutTheme.color }
    },
    iconColor() {
      return { '--icon-color': this.layoutTheme.menuActiveColor }
    },
    borderColor() {
      return { '--border-color': this.layoutTheme.borderColor }
    }
  },
  methods: {
    // 打开智能客服
    openAi() {
      this.$refs.openConsult.open()
      this.$emit('callBack', false)
    },
    // 打开消息列表
    openNotice() {
      this.$refs.noticeDialog.openDialog()
    },
    // 打开收藏中心
    openCollect() {
      this.$refs.collectDialog.openDialog()
    },
    // 打开设置中心
    openSetting() {
      this.$refs.settingDialog.openDialog()
    },
    openTheme() {
      this.$nextTick(() => {
        this.$refs.theme.triggerOnClick()
      })
    },
    closeTheme() {
      this.$nextTick(() => {
        this.$refs.theme.triggerOnClick()
      })
    }
  }
}
</script>

<template>
  <div class="affix-custom-body">
    <div class="affix-li" :style="borderColor" @click="openAi">
      <div class="affix-image">
        <svg-icon icon-class="seek_advice_from" />
      </div>
      <div class="affix-title" :style="fontColor">智能客服</div>
    </div>
    <div class="affix-li" :style="borderColor" @click="openNotice">
      <div class="affix-image">
        <svg-icon icon-class="notice_custom" />
      </div>
      <div class="affix-title" :style="fontColor">我的消息</div>
    </div>
    <div class="affix-li" :style="borderColor" @click="openCollect">
      <div class="affix-image">
        <svg-icon icon-class="sc" />
      </div>
      <div class="affix-title" :style="fontColor">我的收藏</div>
    </div>
    <!--    <div class="affix-li" :style="borderColor" @click="openTheme">
      <theme-temp ref="theme" :trigger="'hover'">
        <div
          slot="theme"
          class="header-theme"
          @mouseenter="openTheme"
          @mouseleave="closeTheme"
        >
          <div class="affix-image">
            <i class="affix-icon el-icon-set-up" :style="iconColor" />
          </div>
          <div class="affix-title" :style="fontColor">主题切换</div>
        </div>
      </theme-temp>
    </div>-->
    <!--    <div class="affix-li" :style="borderColor" @click="openSetting">
      <div class="affix-image">
        <i class="affix-icon el-icon-s-tools" :style="iconColor" />
      </div>
      <div class="affix-title" :style="fontColor">系统设置</div>
    </div>-->
    <dialog-entity ref="openConsult" />
    <notice-dialog ref="noticeDialog" />
    <collect-dialog ref="collectDialog" />
    <setting-dialog ref="settingDialog" />
  </div>
</template>

<style lang="scss" scoped>
.affix-custom-body {
  width: 100%;
  height: auto;
  overflow: hidden;
  .affix-li {
    height: 66px;
    width: 100%;
    cursor: pointer;
    .affix-image {
      width: 100%;
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 2.2rem;
      svg {
        fill: #409eff;
      }
      .el-image {
        width: 32px;
        margin-top: 10px;
      }
      .affix-icon {
        color: var(--icon-color);
        font-size: 32px;
        margin-top: 5px;
      }
    }
    .affix-title {
      width: 100%;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-size: 0.8rem;
      color: var(--font-color);
    }
  }
  .affix-li:hover {
    background-color: #0315d2;
    color: #ffffff;
    .affix-title {
      color: #ffffff;
    }
    svg {
      fill: #ffffff;
    }
  }
}
</style>
